<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <title>
        </title>
        
        <link rel="stylesheet" href="jquery.mobile-1.2.0.min.css"/>
        <link rel="stylesheet" href="my.css" />
        
		<style type="text/css">
		html {height:100%}
		body {height:100%;margin:0;padding:0}
		#map_canvas {height:100%}
		</style>
				
        <script src="jquery-1.8.2.min.js"> </script>
        <script src="jquery.mobile-1.2.0.min.js"> </script>
        <script src="my.js"> </script>
        <script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
		<script type="text/javascript" charset="utf-8" src="cdv-plugin-fb-connect.js"></script>
		<script type="text/javascript" charset="utf-8" src="facebook_js_sdk.js"></script>
		<script src="http://maps.googleapis.com/maps/api/js?sensor=true" type="text/javascript"></script>
		<script src="http://malsup.github.com/jquery.form.js"></script> 
		<script src="http://blog.ikhuerta.com/jsDownload/simpleFacebookGraph.js"></script>
  		<script type="text/javascript" charset="utf-8">

		
		var nombre,latitud, longitud, ciudad, calle, plazas, precio, descripcion, distancia, x,i,HTMLcontent, mydata,lat1 ,lon1 , lat2, lon2, req, id,reqLogin, reqReport, idReport ;

		    // Wait for Cordova to load
		    //
		    document.addEventListener("deviceready", onDeviceReady, false);
		
		    // Cordova is ready
		    //
		    function onDeviceReady() 
		    {				
		        navigator.geolocation.getCurrentPosition(onSuccess, onError);
		    }
		

		    function onSuccess(position) 
		    {
		    	// Estos son los dos parametros que debemos enviar al servidor
		    		
		        lat2 = position.coords.latitude;	
		        lon2 = position.coords.longitude;  
				req = new XMLHttpRequest();
				if (req) 
				{
    				req.onreadystatechange = processReqChange;
    				req.open("GET", 'http://192.168.43.160:8090/xmlwriter/?latitud='+lat2+'&longitud='+lon2+'&jsonp=parseResponse', true);
   					req.send(null);
				}
				
			}
			
		    
			
			
			function onError(error)
		    {
		        alert('code: '    + error.code    + '\n' +
		                'message: ' + error.message + '\n');
		    }
			
			
			
			
	//-----------------------------------------------------------------------------------------------------------------
			

		function parseResponse(data)
		{
			alert (data);
		}
		
		
		// Procesamos el XML del Coche
		
		function processReqChange() 
		{
			if (req.readyState == 4) 
		    {
		        // only if "OK"
		        if (req.status == 200) 
		        {
				        xmlDoc=req.responseXML;
						
						HTMLcontent = '<br>';
						HTMLcontent += '<div data-role="collapsible-set" id="collapsibleSet" >';
						
						for (i=0;i<xmlDoc.getElementsByTagName('nombre').length;i++)
						{
							nombre = xmlDoc.getElementsByTagName('nombre')[i].firstChild.data;
							latitud = xmlDoc.getElementsByTagName('latitud')[i].firstChild.data;
							longitud = xmlDoc.getElementsByTagName('longitud')[i].firstChild.data;
							calle = xmlDoc.getElementsByTagName('calle')[i].firstChild.data;
							ciudad = xmlDoc.getElementsByTagName('ciudad')[i].firstChild.data;
							plazas = xmlDoc.getElementsByTagName('plazas')[i].firstChild.data;
							precio = xmlDoc.getElementsByTagName('precio')[i].firstChild.data;
							descripcion = xmlDoc.getElementsByTagName('descripcion')[i].firstChild.data;
							id = xmlDoc.getElementsByTagName('id')[i].firstChild.data;

	
							// Leemos las coordenadas del destino y calculamos la distancia en kilometros
							
							 lat1 = parseFloat(latitud);
							 lon1 = parseFloat(longitud);
							 distancia = Dist(lat1, lon1, lat2, lon2); 
								
	
	
							mydata = createFileHtml(nombre,calle,ciudad,plazas,precio,descripcion,lat1,lon1,lat2,lon2,distancia,id);
							HTMLcontent = HTMLcontent + mydata;
						}
						
						
						$("#ContentArea").empty();	

						HTMLcontent += '</div>';
						$("#ContentArea").append(HTMLcontent);
						$('#collapsibleSet').find('div[data-role=collapsible]').collapsible({refresh:true});
						
						
						req = new XMLHttpRequest();
						if (req) 
						{
							req.onreadystatechange = processReqChangeBici;
							req.open("GET", 'http://192.168.43.160:8090/xmlwriter/bicycleList/?latitud='+lat2+'&longitud='+lon2+'&jsonp=parseResponse', true);
							req.send(null);
						}
						
						
		        } 
		        else 
		        {
		            alert("There was a problem retrieving the XML data:\n" + req.statusText);
		        }
				
		    }
		}
		
		
		
	//-------------------------------------------------------------------------------------------------------------------------	
	// PRocesamos el XML de la Bici
		
		
		
		function processReqChangeBici() 
		{
			if (req.readyState == 4) 
		    {
		        // only if "OK"
		        if (req.status == 200) 
		        {
				        xmlDoc=req.responseXML;
						
						HTMLcontent = '<br>';
						HTMLcontent += '<div data-role="collapsible-set" id="collapsibleSet" >';
						
						for (i=0;i<xmlDoc.getElementsByTagName('nombre').length;i++)
						{
							nombre = xmlDoc.getElementsByTagName('nombre')[i].firstChild.data;
							latitud = xmlDoc.getElementsByTagName('latitud')[i].firstChild.data;
							longitud = xmlDoc.getElementsByTagName('longitud')[i].firstChild.data;
							calle = xmlDoc.getElementsByTagName('calle')[i].firstChild.data;
							ciudad = xmlDoc.getElementsByTagName('ciudad')[i].firstChild.data;
							plazas = xmlDoc.getElementsByTagName('plazas')[i].firstChild.data;
							precio = xmlDoc.getElementsByTagName('precio')[i].firstChild.data;
							descripcion = xmlDoc.getElementsByTagName('descripcion')[i].firstChild.data;
							id = xmlDoc.getElementsByTagName('id')[i].firstChild.data;

	
							// Leemos las coordenadas del destino y calculamos la distancia en kilometros
							
							 lat1 = parseFloat(latitud);
							 lon1 = parseFloat(longitud);
							 distancia = Dist(lat1, lon1, lat2, lon2); 
								
	
	
							mydata = createFileHtml(nombre,calle,ciudad,plazas,precio,descripcion,lat1,lon1,lat2,lon2,distancia,id);
							HTMLcontent = HTMLcontent + mydata;
						}
						
						
						$("#ContentAreaBici").empty();	

						HTMLcontent += '</div>';
						$("#ContentAreaBici").append(HTMLcontent);
						$('#collapsibleSet').find('div[data-role=collapsible]').collapsible({refresh:true});
						
		        } 
		        else 
		        {
		            alert("There was a problem retrieving the XML data:\n" + req.statusText);
		        }
				
		    }
		}
		
	//-----------------------------------------------------------------------------------------------------------------------------
		
		// Genera el mapa dinamicamente en funcion de nuestra posicion
		
		function showMap(lat1, lon1,lat2,lon2)
		{

			$("#ContentAreaMap").empty();	
			$("#ContentAreaGuide").empty();	
			
			var directionsService = new google.maps.DirectionsService();
			var directionsDisplay = new google.maps.DirectionsRenderer();

			var map = new google.maps.Map(document.getElementById('ContentAreaMap'), 
			{
			   zoom:13,
			   mapTypeId: google.maps.MapTypeId.ROADMAP
			});

			directionsDisplay.setMap(map);
			directionsDisplay.setPanel(document.getElementById('ContentAreaGuide'));



			var request = 
			{
			   origin: new google.maps.LatLng(lat2,lon2), 
			   destination: new google.maps.LatLng(lat1,lon1) ,
			   travelMode: google.maps.DirectionsTravelMode.DRIVING
			};			
			
			directionsService.route(request, function(response, status) 
			{
			   if (status == google.maps.DirectionsStatus.OK) 
			   {
				 directionsDisplay.setDirections(response);
			   }
			});
			
			document.location.href='#page5';	

								
							
		}
		
		
		//---------------------------------------------------------------------------------------------------------------------------------------
		
	// Funcion que genera dinamicamente los collapsible
	
	function createFileHtml(nombre,calle,ciudad,plazas,precio,descripcion,lat1,lon1,lat2,lon2,distancia,id)
	{
		filaHTML = '';
		filaHTML += '<div data-role="collapsible" data-collapsed="true">';
		filaHTML += '<h3>' + nombre + ':  '+ distancia +' Km</h3>';
		filaHTML += '<p> <b> Ciudad: </b> '+ ciudad +'</p>';
		filaHTML += '<p> <b> Calle: </b> '+ calle +'</p>';
		filaHTML += '<p> <b> Plazas: </b> '+ plazas +'</p>';
		filaHTML += '<p> <b> Precio: </b> '+ precio +'Euros/hora</p>';
		filaHTML += '<p> <b> Descripcion: </b> '+ descripcion +'</p>';
		filaHTML += '<p> <button onclick="showMap('+lat1+','+lon1+','+lat2+','+lon2+')">Guiame</button> <button onclick="goReport('+id+')">Denunciar</button> </p> </div>';
		return filaHTML;
	}
	
			// Funcion para calcular distancias
		
		function Dist(lat1, lon1, lat2, lon2)
		{
			  rad = function(x) {return x*Math.PI/180;}

			  var R     = 6378.137;                          //Radio de la tierra en km
			  var dLat  = rad( lat2 - lat1 );
			  var dLong = rad( lon2 - lon1 );

			  var a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(rad(lat1)) * Math.cos(rad(lat2)) * Math.sin(dLong/2) * Math.sin(dLong/2);
			  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
			  var d = R * c;

			  return d.toFixed(3);                      //Retorna tres decimales
		}
		
		
		// Nos lleva a la pagina para realizar el Report
		
		function goReport(id)
		{		
			var formReport = document.forms['formularioReport'];
			formReport.id.value = id;
			document.location.href='#page6';	
		};
		

		
	</script>
	
		<script type="text/javascript">
   	function handleStatusChange(response) {
    	document.body.className = response.authResponse ? 'connected' : 'not_connected';

     	if (response.authResponse) {
       		console.log(response);
     	}
   	}
 	</script>
	
	
	<script type="text/javascript">
	// En esta parte vamos a trabajar sobre la funcion de login de los usuarios
 
 var nameUser;
 var html;
 var xmlUser;
 var mydata;
 var HTMLcontent;
 var reqLogin;
 var lat2;
var lon2;

//---------------------------------------FUNCIONES REDES SOCIALES-------------------------------------------------------------

    
            if ((typeof cordova == 'undefined') && (typeof Cordova == 'undefined')) alert('Cordova variable does not exist. Check that you have included cordova.js correctly');
            if (typeof CDV == 'undefined') alert('CDV variable does not exist. Check that you have included cdv-plugin-fb-connect.js correctly');
            if (typeof FB == 'undefined') alert('FB variable does not exist. Check that you have included the Facebook JS SDK file.');
            
            FB.Event.subscribe('auth.login', function(response) {
                               //alert('auth.login event');
                               });
            
            FB.Event.subscribe('auth.logout', function(response) {
                               //alert('auth.logout event');
                               });
							   
			 function getLoginStatus() 
			 {
                FB.getLoginStatus(function(response) {
                                  if (response.status == 'connected') 
								  {
									 alert('logged in');
                                  } 
								  
								  else 
								  {
								      alert('not logged in');
                                  }
                                  });
            }
			
			function logout() {
                FB.logout(function(response) {
                          alert('logged out');
                          });
            }
            
            function login() {
                FB.login(
                         function(response) {
                         
						 if (response.session)
						 {
                         alert('logged in');
                         } 
						 
						 else 
						 {
							alert('not logged in');
                         }
                         },
                         { scope: "email" }
                         );
            }
	
			function facebookWallPost() 
			{
				var params = {
				    method: 'feed',
				    name: 'ParkingExpress',
				    link: 'https://developers.facebook.com/docs/reference/dialogs/',
				    picture: 'http://www.sevillapartamentos.com/wp-content/uploads/2013/01/parking.png',
				    caption: 'Tu buscador de parkings favorito',
				    description: 'Cuenta a tus amigos lo que has hecho en Parking Express.'
				  };
				console.log(params);
			    FB.ui(params, function(obj) { console.log(obj);});
			}

			
			


 //----------------------------------------------------POST LOGIN----------------------------------------------------------------------------------------
 	function verFormulario()
	{
		navigator.geolocation.getCurrentPosition(goFormulario);
	}
	
	function goFormulario(position)
	{
		var formAddPark = document.forms['formularioAddPark'];
		formAddPark.lat.value = position.coords.latitude;	
		formAddPark.lon.value = position.coords.longitude;  
	 	document.location.href='#page7';	
	}
			 
	function verPerfil()
	{
		document.location.href='#page8';	
	}
 
 
 
 
 
    // esperamos que el DOM cargue
    $(document).ready(function() 
	{ 

			// definimos las opciones del plugin AJAX FORM
            var optionsLogin= 
			{
                success: responseLogin //funcion que se ejecuta una vez enviado el formulario
            };
            
			//asignamos el plugin ajaxForm al formulario myForm y le pasamos las opciones
            $('#formularioLogin').ajaxForm(optionsLogin); 
	 
			 // Funcion en la que tratamos la respuesta del login. En caso de ser positiva, realizamos una peticion xml al servidor.
			 function responseLogin(responseText)
			 {
			 	
				if (responseText=='baddata')
				{
					$("#ContentAreaProfile").append('<br> <p> Login incorrecto </p>' );	
				}
				
				else if (responseText=='success')
				{
					try 
					{
        			FB.init({
        				appId : 190636147750263,
        				nativeInterface : CDV.FB,
        				useCachedDialogs : false
        			});
					} 
					catch (e) 
					{
        			alert(e);
					}
     	
					
					$("#ContentAreaMap").empty();	

					reqLogin = new XMLHttpRequest();
					
					if (reqLogin) 
					{
						reqLogin.onreadystatechange = processLogin;
						reqLogin.open("GET", 'http://192.168.43.160:8090/login/getdata', true);
						reqLogin.send(null);
					}

				}
             };
			 			 
			 //Funcion en la que se trata la recepcion del xml solicitado anteriomente
			 
			 function processLogin()
			 {
					if (reqLogin.readyState == 4) 
					{
						// only if "OK"
						if (reqLogin.status == 200) 
						{
								xmlUser=reqLogin.responseXML;
																
								for (i=0;i<xmlUser.getElementsByTagName('username').length;i++)
								{
									// Aqui leermos todos los datos del xml
									var nombre = xmlUser.getElementsByTagName('username')[i].firstChild.data;		
									var email = xmlUser.getElementsByTagName('email')[i].firstChild.data;
									var puntos = xmlUser.getElementsByTagName('points')[i].firstChild.data;	
									var fecha = xmlUser.getElementsByTagName('regdate')[i].firstChild.data;
									
									var formPerfil = document.forms['formularioVerPerfil'];
									formPerfil.name.value = nombre;
									formPerfil.email.value = email;
									formPerfil.fechaR.value = fecha;
									formPerfil.points.value = puntos;

									
								}	
								
								$("#ContentAreaProfile").empty();
								html = '<p> <button onclick="verFormulario()">Añadir Parking</button> <br> <button onclick="verPerfil()">Ver perfil</button> </p>';
								$("#ContentAreaProfile").append(html);	
								

						} 
						else 
						{
							alert("There was a problem retrieving the XML data:\n" + reqLogin.statusText);
						}
				
					}
			 };
			 
			 
			 
	
	
	
	
		 
//-------------------------------------------------------------POST-REPORT--------------------------------------------------------------------------

            var optionsReport= 
			{
                success: responseReport //funcion que se ejecuta una vez enviado el formulario
            };
            
			//asignamos el plugin ajaxForm al formulario myForm y le pasamos las opciones
            $('#formularioReport').ajaxForm(optionsReport) ; 
			
			function responseReport(responseText)
			{
				if (responseText=='success')
				{
					alert('Muchas gracias. La denuncia esta siendo analizada por nuestros operarios.' );
				}
				else
				{
					alert('Se ha producido un error en el envio. Por favor intentelo mas tarde.' );
				}
				
				document.location.href='#page1';	
			}
			 

			 
			 		 
//-------------------------------------------------------------POST-REGISTER--------------------------------------------------------------------------

            var optionsRegisterUser= 
			{
                success: responseRegisterUser //funcion que se ejecuta una vez enviado el formulario
            };
            
			//asignamos el plugin ajaxForm al formulario myForm y le pasamos las opciones
            $('#formularioRegister').ajaxForm(optionsRegisterUser) ; 
			
			function responseRegisterUser(responseText)
			{				
				if (responseText=='success')
				{
					alert('Te has registrado satisfactoriamente y ya puedes iniciar sesion con tu cuenta.' );
				}
				else if (responseText=='baduser')
				{
					alert('El nombre de usuario introducido ya esta en uso, pruebe con otro.' );
				}
				else if (responseText=='badmail')
				{
					alert('El correo electronico introducido ya esta en uso, pruebe con otro.' );
				}
				
				document.location.href='#page3';	
			};
							 
	
			 		 
//-------------------------------------------------------------POST-AddParking--------------------------------------------------------------------------


	

            var optionsAddParking= 
			{
                success: responseAddParking //funcion que se ejecuta una vez enviado el formulario
            };
            
			//asignamos el plugin ajaxForm al formulario myForm y le pasamos las opciones
            $('#formularioAddPark').ajaxForm(optionsAddParking) ; 
			
			function responseAddParking(responseText)
			{				
				if (responseText=='successf')
				{
					alert('Muchas gracias. El parking esta siendo analizado por nuestros operarios para ser añadido proximamente.' );
					facebookWallPost();

				}
				else if (responseText=='success')
				{
					alert('Muchas gracias. El parking esta siendo analizado por nuestros operarios para ser añadido proximamente.' );

				}
				else
				{
					alert('Se ha producido un error en el envio. Por favor intentelo mas tarde.' );
				}
				
				document.location.href='#page3';	
			};
				
//-------------------------------------------------------------POST-SEARCH--------------------------------------------------------------------------
			
			function createFileHtml(nombre,calle,ciudad,plazas,precio,descripcion,lat1,lon1,lat2,lon2,distancia,id)
			{
				filaHTML = '';
				filaHTML += '<div data-role="collapsible" data-collapsed="true">';
				filaHTML += '<h3>' + nombre + ':  '+ distancia +' Km</h3>';
				filaHTML += '<p> <b> Ciudad: </b> '+ ciudad +'</p>';
				filaHTML += '<p> <b> Calle: </b> '+ calle +'</p>';
				filaHTML += '<p> <b> Plazas: </b> '+ plazas +'</p>';
				filaHTML += '<p> <b> Precio: </b> '+ precio +'Euros/hora</p>';
				filaHTML += '<p> <b> Descripcion: </b> '+ descripcion +'</p>';
				filaHTML += '<p> <button onclick="showMap('+lat1+','+lon1+','+lat2+','+lon2+')">Guiame</button> <button onclick="goReport('+id+')">Denunciar</button> </p> </div>';
				return filaHTML;
			}
	
			// Funcion para calcular distancias
		
			function Dist(lat1, lon1, lat2, lon2)
			{
				 rad = function(x) {return x*Math.PI/180;}
				 var R     = 6378.137;                          //Radio de la tierra en km
				 var dLat  = rad( lat2 - lat1 );
				 var dLong = rad( lon2 - lon1 );
				 var a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(rad(lat1)) * Math.cos(rad(lat2)) * Math.sin(dLong/2) * Math.sin(dLong/2);
				 var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
				 var d = R * c;
				 return d.toFixed(3);                      //Retorna tres decimales
			}
			
			
			var optionsSearch= 
			{
                success: goResponseSearch //funcion que se ejecuta una vez enviado el formulario
            };
            
			//asignamos el plugin ajaxForm al formulario myForm y le pasamos las opciones
            $('#formularioSearch').ajaxForm(optionsSearch) ; 
			
			function goResponseSearch(responseXML)
			{
				navigator.geolocation.getCurrentPosition(getPos);
				responseSearch(responseXML);
				

			}
			
			function getPos(position)
			{
				lat2 = position.coords.latitude;	
				lon2 = position.coords.longitude; 
			}

			
			function responseSearch(responseXML)
			{
						HTMLcontent = '<br>';
						HTMLcontent += '<div data-role="collapsible-set" id="collapsibleSet" >';
						
						for (i=0;i<responseXML.getElementsByTagName('nombre').length;i++)
						{
							var nombre = responseXML.getElementsByTagName('nombre')[i].firstChild.data;
							var latitud = responseXML.getElementsByTagName('latitud')[i].firstChild.data;
							var longitud = responseXML.getElementsByTagName('longitud')[i].firstChild.data;
							var calle = responseXML.getElementsByTagName('calle')[i].firstChild.data;
							var ciudad = responseXML.getElementsByTagName('ciudad')[i].firstChild.data;
							var plazas = responseXML.getElementsByTagName('plazas')[i].firstChild.data;
							var precio = responseXML.getElementsByTagName('precio')[i].firstChild.data;
							var descripcion = responseXML.getElementsByTagName('descripcion')[i].firstChild.data;
							var id = responseXML.getElementsByTagName('id')[i].firstChild.data;

	
							// Leemos las coordenadas del destino y calculamos la distancia en kilometros
							
							 var lat1 = parseFloat(latitud);
							 var lon1 = parseFloat(longitud);
							 
							 
							 var distancia = Dist(lat1, lon1, lat2, lon2); 
								
							var mydata = createFileHtml(nombre,calle,ciudad,plazas,precio,descripcion,lat1,lon1,lat2,lon2,distancia,id);
							var HTMLcontent = HTMLcontent + mydata;
						}
										
						$("#ContentArea").empty();	

						HTMLcontent += '</div>';
						$("#ContentArea").append(HTMLcontent);
						$('#collapsibleSet').find('div[data-role=collapsible]').collapsible({refresh:true});
						
						// Falta añadir un If para diferenciar entre coche o bicicleta
						
						document.location.href='#page1';	

			}
			 
			 
			 
			 
			 
 
    }); 
	
	
 
	</script>
	
	  			
	</head>
	
    
    <body>
       
        
		<!-------------------------------------------------------- Menu Car ------------------------------------------------------------------->
		
        <div data-role="page" id="page1">
            <div data-theme="b" data-role="header" data-position="fixed">
                <h5>
                    Coche
                </h5>
            </div>
          
          
          
         <div data-role="content">
        		
					<div id="ContentArea">
						 <p>  Buscando parkings... </p>
					</div>
					
			
            </div>
           
           
            <div data-role="tabbar" data-iconpos="top" data-theme="a">
                <ul>
                    <li>
                        <a href="#page4" data-theme="" data-icon="star">
                            Bici
                        </a>
                    </li>
                    <li>
                        <a href="#page2" data-theme="" data-icon="search">
                            Buscar
                        </a>
                    </li>
                    <li>
                        <a href="#page3" data-theme="" data-icon="gear">
                            Perfil
                        </a>
                    </li>
                </ul>
            </div>
        </div>
		
		
			
		<!---------------------------------------------------- Menu Search-------------------------------------------------------------------------------- -->
        
		
		<div data-role="page" id="page2">
            <div data-theme="b" data-role="header" data-position="fixed">
                <h5>
                    Buscar
                </h5>
            </div>    

		
			
			 <div data-role="content">
						
				<div id="ContentAreaSearch">
					<form id="formularioSearch" method="POST" action="http://192.168.43.160:8090/xmlwriter/search">
					Destino: <input type="text" name="destination"> <br>
					Vehiculo:
					<select name="vehicle">
					<option value="Car">Coche</option>
					<option value="Bicycle">Bici</option>
<					</select>
					<br>
					<input type="submit" value="Buscar">
					</form>
				</div>
				<div id="ContentAreaSearch2">
				</div>

				
			</div>		
			 
		 
              
            <div data-role="tabbar" data-iconpos="top" data-theme="a">
                <ul>
                    <li>
                        <a href="#page1" data-theme="" data-icon="star">
                            Coche
                        </a>
                    </li>
                    <li>
                        <a href="#page2" data-theme="" data-icon="star">
                            Buscar
                        </a>
                    </li>
                    <li>
                        <a href="#page3" data-theme="" data-icon="gear">
                            Perfil
                        </a>
                    </li>
                </ul>
            </div>
        </div>

<!--------------------------------------------------------- Menu Profile-------------------------------------------------------------------------------- -->
        
		
		<div data-role="page" id="page3">
            <div data-theme="b" data-role="header" data-position="fixed">
                <h5>
                    Identificación
                </h5>
            </div>    

		
			
			 <div data-role="content">
						
				<div id="ContentAreaProfile" align="center">
				
				<form id="formularioLogin" method="POST" action="http://192.168.43.160:8090/login/submit">
				Nombre de usuario: <input type="text" name="user" /><br>
				Contraseña: <input type="password" name="password" /><br>
				<a href="#page9">Registrarse</a><br><br>
				<p><input type="submit" value="Login" /></p>
				</form>
					
					
				</div>
				
			</div>		
			 
		 
              
            <div data-role="tabbar" data-iconpos="top" data-theme="a">
                <ul>
                    <li>
                        <a href="#page1" data-theme="" data-icon="star">
                            Coche
                        </a>
                    </li>
                    <li>
                        <a href="#page2" data-theme="" data-icon="star">
                            Buscar
                        </a>
                    </li>
                    <li>
                        <a href="#page3" data-theme="" data-icon="gear">
                            Perfil
                        </a>
                    </li>
                </ul>
            </div>
        </div>
		
		
		
        
 <!------------------------------------------------------------------ Menu Bicycle -------------------------------------------------------------------->
 



	<div data-role="page" id="page4">
            <div data-theme="b" data-role="header" data-position="fixed">
                <h5>
                    Bici
                </h5>
            </div>         
              
			  
			          
         <div data-role="content">
        		
					<div id="ContentAreaBici">
						 <p>  Buscando parkings... </p>
					</div>
					
			
            </div>  
			  
			  
            <div data-role="tabbar" data-iconpos="top" data-theme="a">
                <ul>
                    <li>
                        <a href="#page1" data-theme="" data-icon="star">
                            Coche
                        </a>
                    </li>
                    <li>
                        <a href="#page2" data-theme="" data-icon="search">
                            Buscar
                        </a>
                    </li>
                    <li>
                        <a href="#page3" data-theme="" data-icon="gear">
                            Perfil
                        </a>
                    </li>
                </ul>
            </div>
        </div>
		
		
		<!----------------------------------------------------------- Menu Map ----------------------------------------------------------------------------------->
        
       
       <div data-role="page" id="page5">
            <div data-theme="b" data-role="header" data-position="fixed">
                <h5>
                    Mapa
                </h5>
            </div>    

		
			
			 <div data-role="content">
						
				<div id="ContentAreaMap" style= "height: 100px;"></div>

				<div id="ContentAreaGuide" style= "width: 300px;"></div>
				
			</div>		
			 
		 
              
            <div data-role="tabbar" data-iconpos="top" data-theme="a">
                <ul>
                    <li>
                        <a href="#page1" data-theme="" data-icon="star">
                            Coche
                        </a>
                    </li>
                    <li>
                        <a href="#page2" data-theme="" data-icon="star">
                            Buscar
                        </a>
                    </li>
                    <li>
                        <a href="#page3" data-theme="" data-icon="gear">
                            Perfil
                        </a>
                    </li>
                </ul>
            </div>
        </div>
		
	 	   
<!----------------------------------------------------------- Menu Report ----------------------------------------------------------------------------------->
        
       
       <div data-role="page" id="page6">
            <div data-theme="b" data-role="header" data-position="fixed">
                <h5>
                    Denuncia
                </h5>
            </div>    

		
			
			 <div data-role="content">
						
				<div id="ContentAreaReport">
				<p> Especifique el motivo por el que desea denunciar este Parking</p> <br>
				
				<form id="formularioReport" method="POST" action="http://192.168.43.160:8090/submitreport">
				<input type="hidden" name="id" value="" size ="40" />
				Motivo: <TEXTAREA NAME="motivoReport" ROWS=6></TEXTAREA> <br>
				<p><input type="submit" value="Enviar" /></p>
				</form>
				
				
				</div>
				
			</div>		
			 
		 
              
            <div data-role="tabbar" data-iconpos="top" data-theme="a">
                <ul>
                    <li>
                        <a href="#page1" data-theme="" data-icon="star">
                            Coche
                        </a>
                    </li>
                    <li>
                        <a href="#page2" data-theme="" data-icon="star">
                            Buscar
                        </a>
                    </li>
                    <li>
                        <a href="#page3" data-theme="" data-icon="gear">
                            Perfil
                        </a>
                    </li>
                </ul>
            </div>
        </div>
		
		
		
<!----------------------------------------------------------- Menu Añadir Parking ----------------------------------------------------------------------------------->
        
       
       <div data-role="page" id="page7">
            <div data-theme="b" data-role="header" data-position="fixed">
                <h5>
                    Añadir Parking
                </h5>
            </div>    

		
			
			 <div data-role="content">
						
				<div id="ContentAreaAddPark">
				<p> Introduza los datos del parking que desea añadir:</p> <br>
					
					<form id="formularioAddPark" method="POST" action="http://192.168.43.160:8090/addparking">
						Vehiculo:
						<select name="vehicle">
						<option value="Car">Coche</option>
						<option value="Bicycle">Bici</option>
						<option value="due">Ambos</option>
						</select>
						<br>
						Nombre: <input type="text" name="name" /><br>
						Calle: <input type="text" name="street" /><br>
						Ciudad: <input type="text" name="city" /><br>
						Numero de plazas: <input type="text" name="places" /><br>
						Precio: <input type="text" name="price" /><br>
						Descripcion: <TEXTAREA name="desc" ROWS=3></TEXTAREA><br>
						<input type="checkbox" name="face" value="true"> Publicar en Facebook<br>
						<input type="hidden" name="lat" value="" size ="40" />
						<input type="hidden" name="lon" value="" size ="40" />
						<p><input type="submit" value="Enviar" /></p>
					</form>
				</div>
			</div>		
			 
		 
              
            <div data-role="tabbar" data-iconpos="top" data-theme="a">
                <ul>
                    <li>
                        <a href="#page1" data-theme="" data-icon="star">
                            Coche
                        </a>
                    </li>
                    <li>
                        <a href="#page2" data-theme="" data-icon="star">
                            Buscar
                        </a>
                    </li>
                    <li>
                        <a href="#page3" data-theme="" data-icon="gear">
                            Perfil
                        </a>
                    </li>
                </ul>
            </div>
        </div>
	   

	   <!----------------------------------------------------------- Menu Ver Perfil ----------------------------------------------------------------------------------->
        
       
       <div data-role="page" id="page8">
            <div data-theme="b" data-role="header" data-position="fixed">
                <h5>
					Mi Perfil
                </h5>
            </div>    

		
			
			 <div data-role="content">
						
				<div id="ContentAreaMiPerfil">
				
				
				<form id="formularioVerPerfil" method="POST" action="">
				Nombre: <input type="text" name="name" readonly /><br>
				Email: <input type="text" name="email" readonly /><br>
				Fecha de registro: <input type="text" name="fechaR" readonly /><br>
				Puntos: <input type="text" name="points" readonly /><br />
				</form>

				</div>
			</div>		
			 
		 
              
            <div data-role="tabbar" data-iconpos="top" data-theme="a">
                <ul>
                    <li>
                        <a href="#page1" data-theme="" data-icon="star">
                            Coche
                        </a>
                    </li>
                    <li>
                        <a href="#page2" data-theme="" data-icon="star">
                            Buscar
                        </a>
                    </li>
                    <li>
                        <a href="#page3" data-theme="" data-icon="gear">
                            Perfil
                        </a>
                    </li>
                </ul>
            </div>
        </div>
	   
		
		
		
		<!--------------------------------------------------------- Menu Registrarse-------------------------------------------------------------------------------- -->
        
		
		<div data-role="page" id="page9">
            <div data-theme="b" data-role="header" data-position="fixed">
                <h5>
                    Registro
                </h5>
            </div>    

		
			
			 <div data-role="content">
						
				<div id="ContentAreaRegister">
				
				<form id="formularioRegister" method="POST" action="http://192.168.43.160.:8090/submitRegister">
				Nombre de usuario: <input type="text" name="username" /><br>
				Contraseña: <input type="text" name="password" /><br>
				Correo: <input type="text" name="email" /><br>
				<p><input type="submit" value="Registrarse" /></p>
				</form>
					
					
				</div>
				
			</div>		
			 
		 
              
            <div data-role="tabbar" data-iconpos="top" data-theme="a">
                <ul>
                    <li>
                        <a href="#page1" data-theme="" data-icon="star">
                            Coche
                        </a>
                    </li>
                    <li>
                        <a href="#page2" data-theme="" data-icon="star">
                            Buscar
                        </a>
                    </li>
                    <li>
                        <a href="#page3" data-theme="" data-icon="gear">
                            Perfil
                        </a>
                    </li>
                </ul>
            </div>
        </div>
		
		
		
		
		
        <script>
              //App custom javascript
        </script>
    </body>

</html>